<template>
  <div style="height: 100vh;position: relative;">
    <el-container>
      <el-header>
        <Header>
        </Header>
        <div style=" right: 76px;top: 55px; position: absolute;">
          <el-dropdown>
            <div>
              <el-avatar icon="el-icon-user">
                <i class="el-icon-arrow-down"></i>
              </el-avatar>
              <div style="color: #FFFFFF;text-align: center"> {{ name }}</div>
            </div>

            <el-dropdown-menu>
              <!-- el-dropdown-item这里的按钮点击事件需要添加.native，否则会报错 -->
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>

      </el-header>
      <el-container>
        <el-side width="200px" style="min-width:10%;margin-top: 90px;">
          <el-menu default-openeds="['/1']" background-color="#fff" text-color="#000000" active-text-color="#409EFF"
            :default-active="$route.path" @open="handleOpen" @close="handleClose" router>
            <el-menu-item index="/success/successindex">
              <i class="el-icon-house"></i>
              首页</el-menu-item>
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span slot="title">报考信息</span>
              </template>
              <el-menu-item index="/success/signupinfo">
                <i class="el-icon-edit"></i>
                我要报名</el-menu-item>
              <el-menu-item index="/success/registerstatus">
                <i class="el-icon-notebook-2"></i>
                报考状态</el-menu-item>
            </el-submenu>
            <!--
            <el-submenu v-for="(item, i) in nav" :key="i" :index="item.index">
              <template slot="title">
                <i class="el-icon-place"></i>
                <span>{{ item.title }}</span>
              </template>
              <el-menu-item v-for="(option, j) in item.options" :key="j" :index="`${item.index}/${j+1}`">{{option}}</el-menu-item>
            </el-submenu>
            -->
          </el-menu>
        </el-side>
        <el-main style="margin-top: 90px">
          <!-- 路由占位符 -->
          <router-view></router-view>
        </el-main>
      </el-container>
      <el-foot>
        <Footer></Footer>
      </el-foot>
    </el-container>
  </div>
</template>

<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";

export default {
  name: "Success",
  components: { Header, Footer },
  data() {
    return {
      name: "",
      nav: [
        {
          title: '报考信息',
          index: "/success/signupinfo",
          options: [
            '我要报名',
            '报名情况',
          ]
        },
        {
          title: '本校学生',
          index: 2,
          options: [
            '毕业论文',
            '证书证明',
          ]
        },
      ]
    }
  },
  created() {
    this.getParams()
  },
  methods: {
    //点击个人信息
    goInfo() {
      console.log("asd")
      this.$router.push("/success/personinfo");
    },
    //点击修改密码
    goModify() {

    },
    //点击退出登陆
    logout() {
      this.$store.commit('logout')
      //返回首页
      this.$router.push("/index");
    },

    getParams() {
      // 取到路由带过来的参数
      this.name = this.$store.state.user.name;
      console.log(this.name)
      //this.$forceUpdate()
    },

    // 点击按钮,切换菜单的折叠和展开
    toggleCollpase() {
      this.isCollapse = !this.isCollapse
    },
    saveActivePath(activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
      // console.log(this.$route.path)
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  }
}
</script>

<style lang="less" scoped>
.el-container {
  /*设置内部填充为0，几个布局元素之间没有间距*/
  padding: 0px;
  /*外部间距也是如此设置*/
  margin: 0px;
  height: 100%;
  width: 100%;

}

.el-aside {
  background-color: #333744;

  .el-menu {
    border-right: none;
  }
}

.el-main {}
</style>